: 타입스크립트는 자바스크립트의 타입부분을 업그레이드해서 사용하고싶을 때 설치해서 쓰는 일정의 자바스크립트 대용품. 완전 다른 언어는 아니라 자바스크립트 문법 그대로 이용하면서 타입문법을 업그레이드해서 쓸 수 있다.
npm install -g typescript
index.ts
, tsconfig.json
파일 생성//tsconfig.json
{
"compilerOptions" : {
"target" : "es5", // 자바스크립트 몇버전으로 컴파일 할지 설정 (es5: 2010~, esnext: 최신자바스크립트 문법)
"module" : "commonjs", // 자바스크립트 import 문법 언제적 자바스크립트 문법으로 바꿀지 설정
}
}
tsc-w
: 브라우저는 js 파일만 읽을 수 있으므로 ts -> js로 변환시켜야함. 컴파일해야함. 컴파일시 사용하는 명령어로 터미널에 입력해두면 ts 파일을 js파일로 자동 변환시켜줌. 끄지말기!! tsconfig.json
에 설정한다.<script src="변환된파일.js"></script>
npm install --save typescript @types/node @types/react @types/react-dom @types/jest
npx create-react-app my-app --template typescript
vue add typescript
: 라이브러리 설치 <script lang="ts">
</script>
let 이름 :타입지정 = 'kim';
let 이름 :string[] = ['kim', 'park'];
let 이름 :{name : string} = {name: 'kim'}
let 이름 :{name? : string} = {name: 'kim'}
let 이름 :string | number = 'kim';
let 이름 :string | number = 123;
type Name = string | number
function 함수 (x :파라미터타입) :리턴타입{
return x*2
}
>```
type Member = [number, boolean]; //첫번째는 number, 두번째는 boolean 값만 올수있다.
let john :Member = [123, true];
>```
type Member = {
[key :string] : string, // 글자로 된 모든 object 속성의 타입은 : string
}
let john : Member = { name : 'kim' }
>```
class User {
name :string;
constructor(name :string){
this.name = name;
}
}
>```