keyof keyof 키워드는 object 타입의 모든 key 를 가져와서 유니온 타입으로 반환한다. 아래의 예시를 보자 interface Person { age: number; name: string; } type PersonKeys = keyof Person; // "age" | "name" 위에서 PersonKeys 타입은 age와 name 중 하나의 문자열 값만 가질 수 있는 리터럴 타입이다. Mapped Types Mapped Types 를 이용하면, 기존의 타입을 새로운 타입으로 변환할 수 있다. object 의 각 속성에 대해 반복적으로 적용을 할 수 있어서 타입 변환 과정을 간결하게 만들어 준다. type TypeChanger = { [Key in keyof MyType]: NewType;..
interface와 implements 를 사용한 class 타입 확인 interface 는 object 의 타입을 지정할 때 사용할 수 있다. 그리고 또 다른 용도로, class 의 타입을 확인할 때에도 사용할 수 있다. 이 때, implements 키워드도 필요하다. 아래의 예시를 보자. class Car { model: string; price: number = 1000; constructor(a: string) { this.model = a; } } let 붕붕이 = new Car('morning'); 위의 Car 클래스에서 생성된 객체들은 model 과 price 속성을 가진다. 클래스가 특정 속성을 가지고 있는지 타입으로 확인하고 싶을 때, interface 와 implements 키워드를 사..
개념 d.ts 파일은 TS에서 타입 정의를 저장하는 파일이다. 여기서 'd' 는 Definition 의 약자이다. 이 파일들은 TS 컴파일 과정에서 JS로 변환되지 않으며, 타입 정보만 포함한다. 주로 2가지 용도로 사용된다. 1. 타입 정의 저장 : 타입 정보만을 분리하여 저장하고, 필요한 곳에서 import 해서 사용한다 2. 레퍼런스 용 : 프로젝트에서 사용하는 타입을 정리해놓은 문서로 활용할 수 있다. d.ts 파일에서 타입 정의하기 d.ts 파일 내에서는 주로 type 키워드, interface, 함수 타입 정의를 포함할 수 있다. 함수 본문을 정의할 수는 없고, 파라미터과 return 타입만 지정할 수 있다. export type Age = number; export type Multiply ..
JS 파일에 선언된 변수 TS 파일에서 사용하기 JS 파일에서 선언된 변수를 TS 파일에서 사용하고 싶을 때에는 declare 키워드를 사용한다. declare 키워드를 사용하면 TS 파일 내에서 JS 파일에 정의된 변수나 함수의 타입을 명시할 수 있다. declare let a: number; 위 예시처럼 TS 파일에 declare 를 선언하면 '변수 a 는 number 타입이며, 이미 어딘가에 정의되어 있다' 라고 TS 컴파일러에게 알리는 것이다. declare global 'declare global' 은 TS 모듈 내에서 전역 변수나 타입을 선언할 때 사용된다. 일반적으로 TS 파일은 자체 scope 를 가지고 있어, 파일 내에서 선언된 변수나 타입은 그 파일 내에서만 접근이 가능하다. 하지만 때..
Tuple type Tuple 은 타입스크립트에서 고정된 수의 요소를 가지면서, 각 요소의 타입이 명시적으로 지정된 배열의 타입이다. 각 요소의 타입은 다를 수 있고, 배열의 길이는 고정된다. 예를 들어 첫번째 요소가 문자열이고, 두번째 요소가 숫자인 배열을 정의하고 싶다면 다음과 같이 작성할 수 있다. let exampleTuple: [string, number] = ['hello', 42]; Tuple 응용 : Rest Parameters 함수의 매개변수로 '...' (rest 연산자)를 사용하면 인자를 배열로 받을 수 있다. 이 기능을 tuple 이랑 결합해보자. 예를 들어 첫번째 인자는 문자열이고, 두번째 인자는 숫자여야 하는 경우에 다음과 같이 작성할 수 있다. args 라는 배열에 string..
React 프로젝트 생성 타입스크립트의 셋팅이 완료된 새로운 프로젝트를 생성하는 법이다 npx create-react-app 프로젝트명 --template typescript 만약 기존 프로젝트에 타입스크립트만 추가하고 싶다면 다음과 같이 터미널에 입력한다 npm install --save typescript @types/node @types/react @types/react-dom @types/jest Typescript로 만든 React 프로젝트 일반 프로젝트와 다른 점은 컴포넌트 파일에 js 가 아닌 tsx 확장자를 사용해야한다는 것이다. 그러면 리액트 프로젝트에서 typescript 문법을 어디에 응용할 수 있을지 알아보자 JSX 타입지정 리액트에서는 변수나 자료에 를 담아서 쓸 수 있다. 리액트..
Generic function 함수(x: unknown[]) { return x[0]; } let a = 함수([4,2]) console.log(a) 위와 같은 코드를 보자. unknown 타입의 array 자료를 입력하면, array의 맨 앞 첫번째의 요소를 리턴해주는 함수가 있다고 해보자. console.log 로 콘솔에 찍힌 a 의 타입은 뭘까? unknown 이다. 입력하는 array 도 unknown 타입이기 때문이다. function 함수(x: unknown[]) { return x[0]; } let a = 함수([4,2]) console.log(a + 1) 때문에 이런 경우에는 에러가 날 것이다. 왜냐하면 a 는 unknown 타입인데, 숫자인 1을 더하려고 했기 때문이다. 이런 문제를 해결..
type import export a.ts 파일에 있는 것을 b.ts에서 쓰고싶다면 다음과 같이 코드를 작성할 수 있다. (a.ts) export type Name = string | boolean; export type Age = (a :number) => number; (b.ts) import {Name, Age} from './a' let 이름 :Name = 'kim'; let 함수 :Age = (a) => { return a + 10 } namespace 과거에는 자바스크립트의 import export 문법이 없었다 그래서 코드를 써서 다른 파일들을 일종의 첨부처럼 했는데 이러면 파일이 많아질 수록 변수명이 겹치는 위험이 발생할 수 있었다. 그래서 외부파일에서 사용하지 않을 변수들은 함수로 감쌌었..
protected class 에 관련해서, extends 라는 문법을 쓰면 class 를 복사해서 사용할 수 있다. 근데 private 으로 선언한 것은 기존 class 안에서만 사용할 수 있다. extends 로 만든 class 에서 원본의 class 속성을 쓰고 싶다면 protected 로 선언하면 된다. private 이랑 같으면서도, extends 된 class 안에서도 사용가능하게 해준다. class User { protected x = 10; } class NewUser extends User { doThis(){ this.x = 20; } } NewUser class 는 User class 를 extends 한다. NewUser 에서 this.x 처럼 x 를 쓰려고 하면, 기존에 privat..
객체 지향 언어에서 제공하는 public, private, static, protected 와 같은 키워드들을 타입스크립트에서 사용가능하다. public 타입스크립트는 class 안에서 public 키워드를 사용가능하다 class User { public name: string; constructor(){ this.name = 'kim'; } } let user1 = new User(); user1.name = 'park'; 위 코드에서는 public 으로 선언된 name 이라는 속성이 있다. 이렇게 name 처럼 public 이 붙은 속성은 user1과 같은 자식 object 들이 마음대로 사용/수정이 가능하다. 만약 public 을 안 붙인 채로 만든다고 해도, 기본적으로 자동으로 아무것도 안붙인 경..
never 타입을 굳이 쓸일은 없을 수 있지만 개발하다가 나오면 어떤 건지는 알기위해..! never 키워드에 대해서 배워보자 never 란 함수에 void 타입을 붙이듯 return type 으로 쓸 수 있다. 예를 들어 다음과 같다 function myFunc() :never{ } myFunc 이라는 함수는 다음을 만족한다 1. return 을 하면 안된다 2. 함수에 endpoint 가 없어야한다 (둘이 같은 얘기이기는 하다) 여기서 endpoint 가 없어야한다는 것은 함수실행이 끝나지 않는 것이다. while(true) 때문에 함수 실행이 끝나지 않는.. 그런 예시를 생각해보면 되겠다. function 함수() :never{ throw new Error('에러메세지') } 위의 예시를 보자면 t..
rest parameter 먼저 rest parameter 에 대해서 간단히 짚고 넘어가자 function PrintNumArr(...a){ console.log(a) } PrintNumArr(1,2,3,4,5) 위처럼 함수 파라미터를 만들때 앞에 ... 을 붙여주면 그 위치에는 여러값들이 들어있는 리스트가 남는다고 생각할 수 있다. [LOG]: [1, 2, 3, 4, 5] 그럼 rest parameter 의 타입지정은 어떻게 할까? rest parameter 의 타입지정 array 취급이기 때문에 (숫자가 들어가는 array 라는 가정하에) number[] 이런식으로 작성해줄 수 있겠다. 아래와 같다 function PrintNumArr(...a:number[]){ console.log(a) } Pri..
이전에 type alias 를 이용해서 타입을 변수처럼 저장해 사용하는 방법을 배웠다. 추가로, object 에 타입을 지정할 때 interface 라는 키워드를 이용할 수도 있다. interface interface Student{ name: string } interface Teacher{ name: string, age: number } let 학생: Student = {name:'kim'} let 선생: Teacher = {name:'kim', age:20} interface 는 type 키워드 처럼 사용할 수 있는 키워드이다. interface 의 장점은 extends 를 할 수 있다는 것이다. 예를 들어 위의 코드를 아래와 같이 쓸 수도 있다. interface Student{ name: st..
필드값 타입지정 class 내부에는 object 가 사용할 수 있는 필드값을 만들 수 있다. class Person { data = 0; } let john = new Person(); let kim = new Person(); console.log(john.data); console.log(kim.data); 예를 들어 Person 이라는 class 에 0 값을 가지는 data 라는 걸 만들어놓으면 john 이나 kim 에서 이 data 라는 필드를 사용할 수 있다. 이 때 이 data 라는 필드에 타입을 지정해준다면 다음과 같다 class Person { data :number = 0; } 하지만 굳이 쓰지 않아도 자동으로 number 타입이된다. 타입스크립트는 자동으로 타입지정을 해주기 때문! co..
strictNullCheck 옵션 켜기 tsconfig.json 파일에 들어가서 strict 옵션을 true 로 켜준다. strictNullChecks 만 켜줘도 된다. (strict 안에 strictNullChecks 가 들어가 있다) 변수를 조작하면서 null 인지 체크할 때 유용하다 HTML 파일 script 태그에 변환된 index.js 를 적어서 연결해준다. HTML 찾아 변경하기 h4 제목을 다른 글자로 변경하려고 한다. 위 코드처럼 일단 '제목' 이라는 변수에 document.querySelector 를 통해 title 이라는 id 를 가진 object 를 가져온 후, narrowing 을 통해 null 이 아닌지 체크후에 null 이 아니라면 제목.innerHTML 을 '반갑소' 로 바꿔줬..
함수 type 을 저장하기 함수에 들어갈 파라미터와 return 값의 타입들도 지정할 수 있다고 배웠는데, 이 함수의 타입도 type alias 로 저장해서 사용할 수가 있다. type NumOut = (x : number, y : number ) => number ; 위는 예시이다 NumOut 이라는 타입을 만든건데, 이 타입은 함수를 위한 타입이다. number 타입의 x 와 number 타입의 y 를 파라미터로 받아야하고, return 값이 number 타입이어야한다는 의미이다. 그래서 이 NumOut 이라는 type alias 를 함수에 직접 사용해보는 예시는 아래와 같다 type NumOut = (x : number, y : number ) => number let ABC :NumOut = fu..
지금까지 어떤 변수에 타입을 지정하는 방법에 대해서 배워왔다. 그런데 어떤 변수에 '어떤 값' 이 들어가도록 아예 제한할 수도 있다. const 를 쓸 수도 있겠지만, 내가 어떤 변수에 들어갈 수 있는 값을 2~3개 지정할 수도 있는 것이다. 이럴 땐 Literal Type 을 선언하면된다. Literal Type string, number... 뿐 아니라 일반 값도 타입이 될 수 있다. let name :'홍길동'; 예를 들어서 위처럼 name 이라는 변수에는 '홍길동' 이라는 글자만 들어갈 수 있는 것이다. 이렇게 특정 값만 가질 수 있게 제한을 둘 수 있는 타입을 literal type 이라고 한다. 더 엄격하게 만드는 개념이다. 꼭 1개가 아니어도 된다. let name :'홍길동'|'서다원'; ..
Type Aliases 타입 정의가 너무 길면 타입을 변수에 담아서 쓸 수 있다. Type alias 라고 한다. 여기서 alias 는 '별명' 이라는 의미이다. let 동물 :string | number | undefined; 예를 들어서 위처럼 동물 이라는 타입이 복잡하면 이걸 따로 빼서 변수에 담아쓸 수 있다. type Animal = string | number | undefined; let 동물 :Animal; 이렇게 말이다. 타입을 변수처럼 만들어 쓰는 alias 문법이며, 대문자로 적는게 일반적이다. object 타입 저장하기 type 사람 = { name : string, age : number, } let teacher :사람 = { name : 'john', age : 20 } 위처럼 ..
function plusOne(x :number | string){ return x + 1 //에러남 } 위와 같은 함수가 있다고 보자 x 파라미터는 string | number 와 같은 union 타입인데 숫자 1 을 더하기에는 x 가 string 인지 number 인지 애매하기 때문에 에러를 내게 된다. 따라서 이럴 땐 타입을 하나로 narrowing 해주거나 assert 해주거나 하면 된다. narrowing 에 대해서 먼저 알아보자 typeof 를 이용한 Type Narrowing 타입 narrowing 이란 if 문으로 타입을 하나로 정하는 것을 말한다. function plusOne(x :number | string){ if (typeof x === 'number') { return x + 1..
참고로 수업 들으면서 아래 사이트의 ide 를 이용해 코드를 작성하고 실행시켜보면서 학습했습니다! https://www.typescriptlang.org/play TS Playground - An online editor for exploring TypeScript and JavaScript The Playground lets you write TypeScript or JavaScript online in a safe and sharable way. www.typescriptlang.org 함수는 두 군데에 타입 지정이 가능하다. 파라미터 return 값 function 함수(x :number) :number { return x * 2; } 그래서 위처럼 x 라는 파라미터를 number 라는 타입으로 지..
union type 변수에 들어올 값이 string 또는 number 이라면 아래와 같이 작성이 가능하다. let 이름: string | number = 'kim'; let 나이: (string | number) = 100; 괄호를 작성하게 되면 A | B | C 처럼 여러개를 작성할 수도 있다. 저렇게 할당하는 순간 타입은 string 또는 number 중 하나로 변한다. array 나 object 를 만들 때 union type 을 쓰는 법에 대해서 알아보자. var 어레이: (number | string)[] = [1,'2',3] var 오브젝트: {data : (number | string) } = { data : '123' } 하지만 다른 점이 있다면 변수에 정의된 union 타입은 할당을 하면..
기본 타입 기본 타입을 정리해보자 string, number, boolean 등이 있다. 저렇게 변수 옆에 : 를 붙이고 오른쪽에 타입을 작성해주면 된다. (null, undefined 도 있다) let 이름 :string = 'kim'; let 나이 :number = 20; let 결혼여부 :boolean = false; array 와 object 여러 자료를 한번에 저장하고 싶을 때 array 나 object 를 쓴다. 예를 들어 string 이 들어가는 array 를 작성하고 싶으면 다음과 같이 작성한다. let 회원들 :string[] = ['kim', 'park'] 만약에 string 만이 아닌 string 또는 number 가 들어가는 array 를 작성하고 싶다면 다음과 같이 작성하는데 이건..
tsconfig 파일 생성하기 프로젝트 폴더에 tsconfig.json 이라는 파일을 생성한다. 여기에는 ts 파일을 js 파일로 변환할 때에 어떻게 변환할지 세부설정을 작성할 수 있다. { "compilerOptions": { "target": "es5", "module": "commonjs", } } target : ts 파일을 어떤 버전의 js 로 바꿔줄지 정하는 부분 module : js 파일간 import 문법을 구현할 때 어떤 문법을 쓸지 정하는 부분 (예를 들어 commonjs 는 require 를 쓰고, es2015 는 import 를 쓴다) 그 밖에 추가로 넣을 수 있는 것들이 몇가지 있는데 다음과 같다. { "compilerOptions": { "target": "es5", "modul..
