Typescript
Typescript
타입 스크립트란 자바스크립트의 문법을 그대로 이용 가능한데 타입 부분을 업그레이드 해서 쓸 수 있다는 차이점이 있다 크기가 큰 프로젝트를 할 때는 주로 타입 스크립트를 사용한다 일종의 자바스크립트의 부가 기능으로 봐도 된다
사용하는 이유
- 자바스크립트는
1 - '3'을 해도 자동 형변환을 통해서 계산이 되지만 이 부분을 제한 할 수 있다 (코드를 길게 작성한다면 자유도와 유연성은 별로 좋지 않다) 타입 스크립트는 에러를 출력한다 - 에러 메세지가 정확해진다 (원래는 추상적으로 나온다)
타입 스크립트 설치 및 사용
node.js 설치
vscode 준비
터미널
npm install -g typescript- tsconfig.json 파일 생성 (ts ->js 컴파일에 관한 정보 저장)
1 2 3 4 5 6
{ "compilerOptions" : { "target": "es5", "module": "commonjs", } }
이름.ts로 파일을 만들고 사용
- 브라우저는 js파일만 인식하기 때문에 ts -> js변환 과정이 필요 tsc -w를 입력하면 자동으로 변환시켜준다
타입 스크립트 문법
1
let 이름 :string = 'minnnning';
이름이라는 변수에는 string 형태만 가능하다
사용할 수 있는 자료형은 (string, number, boolean, null, undefined, bigint, [], {}등)
1
let name :string[] = ['kim', 'min'];
배열중에서 string 형태만 올 수 있다
1
2
let aaa :{ name : string } = { name : 'kim'};
let bbb :{ name? : string } = { };
object 형태의 선언이고 속성 name뒤에 ?가 붙어서 속성이 안들어와도 오류를 출력 안시킬 수 있다
한 변수에 다양한 타입이 들어올 수 있게 Union type
1
let name :string | number = 123;
타입을 변수에 담아서 쓸수 있다 Type alias
1
2
type Type1 = string | number;
let name :Type1 = 123;
함수에서 타입지정
1
2
3
function func(x: number) :bigint {
return x+1;
}
파라미터 x의 타입지정number 리턴값의 타입 지정bigint
만약 object타입에서 속성들이 매우 많다면 모두 작성하지 않아도 된다
1
2
3
4
type Member = {
[key :string] : string,
};
let person :Member = {name :'minnnning', age: '16'};
class 타입지정
1
2
3
4
5
6
class User {
name :string;
constructor(name :string){
this.name = name;
}
}
코딩애플 타입스크립트 참고
This post is licensed under CC BY 4.0 by the author.