typeScript 시작
sudo npm install -g typescript (window sudo 제외)
파일명.ts로 끝나는 파일 만들고 타입스크립트 사용
웹브라우저는 ts 파일을 알아듣지 못하기 때문에 js 파일로 변환 작업을 해야한다.
터미널에 tsc -w 입력해두면 자동으로 ts파일을 js 파일로 변환
Typescript 컴파일시 세부설정 (tsconfig.json)
타입스크립트 ts 파일들을 .js 파일로 변환할 때 어떻게 변환할 것인지 세부설정이 가능
기본설정
{
"compilerOptions": {
"target": "es5",
"module": "commonjs",
}
}자동 tsconfig.json 타입스크립트 설정 파일 생성
yarn run tsc --init
기본설정 외 추가로 넣을만한 것들
https://www.typescriptlang.org/tsconfig
{
"compilerOptions": {
"target": "es5", // 'es3', 'es5', 'es2015', 'es2016', 'es2017','es2018', 'esnext' 가능
"module": "commonjs", //무슨 import 문법 쓸건지 'commonjs', 'amd', 'es2015', 'esnext'
"allowJs": true, // js 파일들 ts에서 import해서 쓸 수 있는지
"checkJs": true, // 일반 js 파일에서도 에러체크 여부
"jsx": "preserve", // tsx 파일을 jsx로 어떻게 컴파일할 것인지 'preserve', 'react-native', 'react'
"declaration": true, //컴파일시 .d.ts 파일도 자동으로 함께생성 (현재쓰는 모든 타입이 정의된 파일)
"outFile": "./", //모든 ts파일을 js파일 하나로 컴파일해줌 (module이 none, amd, system일 때만 가능)
"outDir": "./", //js파일 아웃풋 경로바꾸기
"rootDir": "./", //루트경로 바꾸기 (js 파일 아웃풋 경로에 영향줌)
"removeComments": true, //컴파일시 주석제거
"strict": true, //strict 관련, noimplicit 어쩌구 관련 모드 전부 켜기
"noImplicitAny": true, //any타입 금지 여부
"strictNullChecks": true, //null, undefined 타입에 이상한 짓 할시 에러내기
"strictFunctionTypes": true, //함수파라미터 타입체크 강하게
"strictPropertyInitialization": true, //class constructor 작성시 타입체크 강하게
"noImplicitThis": true, //this 키워드가 any 타입일 경우 에러내기
"alwaysStrict": true, //자바스크립트 "use strict" 모드 켜기
"noUnusedLocals": true, //쓰지않는 지역변수 있으면 에러내기
"noUnusedParameters": true, //쓰지않는 파라미터 있으면 에러내기
"noImplicitReturns": true, //함수에서 return 빼먹으면 에러내기
"noFallthroughCasesInSwitch": true, //switch문 이상하면 에러내기
}
}React에 typeScript 적용
이미 있는 프로젝트이면?
npm install --save typescript @types/node @types/react @types/react-dom @types/jest
또는
yarn add --save typescript @types/node @types/react @types/react-dom @types/jest
새로운 프로젝트이면?
npx create-react-app 프로젝트이름 --template typescript
변수
let name :string = 'kim'변수를 만들 때 타입지정이 가능합니다.
변수명 : 타입명 이렇게 씁니다.
타입으로 쓸 수 있는 것들은 string, number, boolean, bigint, null, undefined,[], {} 등이 있습니다.
union type
타입 2개 이상 합친 새로운 타입 만들기
let name :string | number = 'kim';이 변수에 여러가지 타입의 데이터가 들어올 수 있다면
| 기호를 이용해 or 연산자를 표현할 수 있습니다.
위 예제는 변수에 숫자 혹은 문자를 집어넣을 수 있게 됩니다.
array 및 object
let name :string[] = ['kim', 'park']
let age :{ age : number } = { age : number }array 혹은 object 자료는 이렇게 타입지정이 가능합니다.
let age :{ age? : number } = { age : number }age?는 age가 아닐 수 도 있을 때 사용.
타입변수
type nameType = string | number;
let name :nameType = 'kim';type 키워드를 이용해 타입을 변수처럼 담아서 사용가능합니다.
type NameType = 'kim' | 'park;
let 이름 :NameType = 'kim';string number 이런 것 뿐만 아니라 나만의 타입을 만들어 사용가능합니다.
저렇게 원하는 글자나 숫자를 입력하면 이름이라는 변수엔 앞으로 'kim' 또는 'park'만 들어올 수 있습니다.
literal type이라고 부릅니다.
함수
function 함수명(x :number) :number{
return x * 2
}함수는 파라미터와 return 값이 어떤 타입일지 지정가능합니다.
실수로 다른 타입이 파라미터로 들어오거나 return될 경우 에러를 내줍니다.
(x :number) -> x의 값
:number -> return의 값
//에러
function 함수명(x :number | string) {
return x * 2
}
//가능
function 함수명(x :number | string) {
if (typeof x === 'number'){
return x * 2
}
}타입스크립트는 지금 변수의 타입이 확실하지 않으면 마음대로 연산할 수 없습니다.
항상 타입이 무엇인지 미리 체크하는 narrowing 또는 assertion 문법을 사용해야 허락해줍니다.
tuple
type Member = [number, boolean];
let john:Member = [100, false]array 자료 안에 순서를 포함해서 어떤 자료가 들어올지 정확히 지정하고 싶으면
tuple 타입을 쓰면 됩니다. 대괄호 [ ] 안에 들어올 자료의 타입을 차례로 적어주면 됩니다.
타입 변수
type MyObject = {
name? : string,
age : number
}
let 철수 :MyObject = {
name : 'kim',
age : 50
}object 타입도 정의가 너무 길면 type 키워드로 변수에 담아 사용가능합니다.
type 키워드 대신 비교적 최근에 나온 interface 키워드를 이용해도 무방합니다. 차이점은 별로 없습니다.
특정 속성이 선택사항이면 물음표를 기입가능합니다.
type MyObject = {
[key :string] : number,
}
let 철수 :MyObject = {
age : 50,
weight : 100,
}object안에 어떤 속성이 들어갈지 아직 모른다면 그냥 전부 싸잡아서 타입지정도 가능합니다.
index signature라고 합니다.
class
class Person {
name;
constructor(name :string){
this.name = name;
}
}class도 타입설정이 가능합니다.
다만 중괄호 내에 미리 name 이렇게 변수를 만들어놔야 constructor 안에서 this.name 이렇게 사용가능합니다.
한번에 여러 타입 지정
let project :{
member : string[],
days : number,
started : boolean,
} = {
member : ['kim', 'park'],
days : 30,
started : true,
}출처:애플코딩
