js에서 일어날 수 있는 오류들을 컴파일 전에 잡아는 언어
types
타입 선언
implicit
let a = "word"
-> a가 string인 것을 implicit하게 알 수 있음
-> type을 추론함
explicit
let a : string = "word"
let a : sting
-> a가 string인 것을 explicit하게 알 수 있음
player object 만들어보기
type Player = { name: string, age?: number }
-> age?는 age가 null을 허용한다는 것
함수의 return type
function playerMaker(name:string) : Player { return { name } }
==
const PlayerMaker = (name:string) : Player => ({name})
readonly
readonly인 변수를 변경하려고 하면 에러 발생
const numbers: readonly number[] = [1,2,3,4]
-> 여기서 number.push(1)하면 에러 발생
-> readonly number[] 타입에 push 존재하지 않음
tuple
특정 위치에 특정 타입이 있어야 할 때 사용
const player: readonly [string, number, boolean] = ["jw", 1, true]
any
남용하면 js와 다를 게 없음
only sometimes..
unknown
unknown 타입인 변수의 타입을 먼저 확인해야함
let a : unknown
if typeof a === 'number'){ let b = a + 1 }
void
아무것도 return하지 않을 때 쓰임
never
return을 절대하지 않을 때 사용됨
함수에서 예외가 발생시킬 때 사용됨
함수
call signature
함수의 인자 타입과 반환 타입 알려줌
type Add = (a: number, b: number) => number
-> 타입을 만들고 함수 구현 전에 함수 타입 설정 가능
const add:Add = (a,b) => a+b
-> a,b에 타입 지정할 필요 없음
overloading
외부 라이브러리에 오버로딩 사용
여러개의 call signature가 있을 때 사용
type Add = { (a: number, b: number) : number, (a: number, b: string) : number, (a: number, b: number, c:number) : number }일 때
const add: Add = (a,b,c?) => { if(typeof b === "string") return a return a+b }
이렇게 b의 타입을 알아내고 그에 맞는 return을 해줘야함.
c의 경우는 없을 수도 있기 때문에 ?를 붙여줌
pholymorphism
여러 타입들 사용 가능(?)
generic
type Print = { (arr: number[]):void (arr: boolean[]):void (arr: string[]):void }
타입만 바뀔 때
type Print = { <T>(arr:T[]):void }
T라는 generic을 사용하면 타입스크립트가 타입을 추정함
<T,M>과 같이 여러 개 사용도 가능.
-> 어디에 쓰일지 알려줘야함.
class
class에서 변수 선언 후에 생성해도 됨....(?)
class Dict{ private words:Words constructor(){ this.words = {} } }
-> 생성자 안에 넣을 필요 없음(?)
class Word{ constructor( public term: string, public def: string ) {} }
word 클래스를
add(word:Word){}와 같이 타입으로 사용할 수 있음
[key:string]: string와 같은 형식의 타입도 만들 수 있음
interface
type과 비슷하지만 object의 모양을 정하기 위해 사용
<- type은 object의 shape을 정하거나 타입(alias)을 알려줄 수 있음
type Team = "read" | "blue"
type User3 = { name:string }
type Player3 = User3 & { }
이거랑
interface User4 { name:string }
interface Player4 extends User4 { }
이거는 같음
인터페이스에서는
interface User4 { name:string }
interface User4 { Lname:string }
interface User4 { Mname:string }
와 같이 여러 개의 인터페이스를 작성해도 쓸 때 합쳐줌.
const jwj4 : User4 = { name: "jwj", Lname:"ddd", Mname:"dddd" }
추상클래스에서는 바로 인터페이스를 만들 수 없음
-> 어떻게 동작해야하는지만 알려줌
js에는 인터페이스가 없어서 tsc컴파일 할 때 사라짐
implement도 마찬가지.
interface를 implement할 때 properties 작성해줘야함.
ts가 js를 아는 법
ts는 기본적인 js api 정의를 알고있음
js file을 import 해야할 때,#ts-check를 통해 확인할 수 있음. ts에게 call signature을 알려줘야함.
