오늘은 typescript에 대해서 정리한다!
타입 스크립트는 개발자 설문조사에서 가장 좋아하고 관심있는 프로그래밍 언어 2위에 올랐다.

Typescript란?

Typescript는 javascript 기반으로 하는 오픈소스 언어이다.
Typescript는 자신이 원하는 타입을 정의하고 프로그래밍 하면 javascript로 컴파일되어 실행된다.

Javascript 엔진을 사용하고 큰 어플리케이션을 개발할 수 있는 언어이다.
Javascript로 작성한 프로그램도 typescript 프로그램으로도 동작한다.

Typescript 특징

• 컴파일 언어이자 정적 타입 언어
  타입스크립트는 자바스크립트와 다르게 정적타입언어이다. 타입스크립트는 정적타입의 컴파일 언어로 타입스크립트 컴파일러나 바벨을 이용해 자바스크립트 코드로 변환된다.

정적타입언어의 특징같이 미리 타입을 결정하기 때문에 실행속도가 매우 빠르다.
하지만 타입을 적기 때문에 코드량이 늘어나고 번거로우며 컴파일 시간이 오래 걸린다.

• 자바스크립트 슈퍼셋
  자바스크립트 기본 문법에 타입스크립트의 문법을 추가한 언어이다.
  자바스크립트로 작송된 프로그램도 타입스크립트 프로그램으로 실행가능하다.

• 객체 지향 프로그래밍 지원
  타입스크립트는 ES6 문법을 포함하고 클래스, 인터페이스, 상속, 모듈 같은 객체 지향 프로그래밍 패턴을 제공한다.

Typescript를 찾는 이유

• 높은 수준의 코드 탐색과 디버깅
  타입스크립트는 타입을 적는 정적타입언어로 코드의 목적을 나타낸다. 변수나 함수에 에러를 발생시켜서 사전에 버그를 제거한다. 자동완성이나 실행 전 피드백을 주기 때문에 작업과 동시에 디버깅이 가능하다.

• 자바스크립트 호환
  타입스크립트는 자바스크립트와 100% 호환이 가능하다. 자바스크립트는 프론트엔드 뿐만 아니라 백엔드에서도 사용이 가능하다. 타입스크립트도 자바스크립트가 사용할 수 있는 곳이라면 동일한 용도로 쓸 수 있다. 서버에서 개발이 이루어지는 복잡하고 큰 프로젝트에 딱 맞는다.

• 강력한 생태계
  타입스크립트는 나온지 오래된 언어가 아니지만 강력한 생태계를 가지고 있다. 대부분의 라이브러리가 지원하고 vscode 등 다양한 에디터에서 타입스크립트 관련 기능과 플러그인을 지원한다.

규모가 크고 복잡한 프로그램, 유지보수가 중요한 장기 프로젝트에서 빛을 낸다.

Frontend Framework

• React
  리액트와 타입스크립트의 호환성은 매우 좋다. 많은 개발자들이 최근에 리액트와 타입스크립트 조합을 찾는다. 리액트 웹 개발용 보일러 플레이트인 CRA(create-react-app) 에서 간단한 옵션 추가로 타입스크립트를 사용할 수 있다.

• Vue
  최신 릴리즈된 뷰 3.0부터 타입스크립트를 지원한다.
  뷰3.0 CLI는 타입스크립트 도구화 지원을 기본으로 제공한다.

• Angular
  버전2부터 타입스크립트 기반으로 만들어졌고 권장하고 있다.

Typescript로 전환하기

유효한 자바스크립트는 유효한 타입스크립트이다. 타입스크립트는 변수를 명시하지 않아도 최선을 다해 타입을 추론한다.

1. vscode로 자바스크립트 페어링
   자바스크립트에서 타입스크립트 검사를 활성화할 수 있는 설정이 있다. .vscode/setting.json에 코드를 추가한다.

{
 "Javascript.implicitProjectConfig.checkJs": true
}

타입이 안전하지 않는 코드에는 에디터에서 에러를 표시한다. 코드에는 영향을 주지 않는다. 타입스크립트를 선택적으로 비활성화 할 수 있다.

@ts-ignore (해당 줄)
@ts-nocheck (전체)

2. 자바스크립트 용 타입스크립트 컴파일러 사용
   타입스크립트 컴파일러를 설치하고 스크립트를 실행하거나 설정한다.

// tsconfig.json
{
 "compilerOptions": {
  "allowJs": true	// 타입스크립트 컴파일러를 통해 실행할 자바스크립트 파일을 선택
  "checkJs": false	// 자바스크립트 파일의 타입을 체크
  "outDir": "./dist"
  "rootDir": "./src"
  "strict": false
 }
}

타입스크립트 컴파일러를 실행하고 자바스크립트를 확인한다.
"checkJs": true로 타입체크를 진행한다.

3. 타입스크립트 파일로 변환
   자바스크립트 파일에서 타입을 확인한 뒤 타입스크립트 파일로 변경한다. allowJS를 활성화했으므로 점진적으로 변경해도 된다. 이미 자바스크립트 코드를 체크했기 때문에 변경사항이 적을 것이다.

4. 엄격한 타입 체크

{
 "compilerOptions": {
 "noImplicitAny": true,
 "strictNullChecks": true,
 "strictFunctionTypes": true,
 "strictBindCallApply": true,
 "strictPropertyInitialization": true,
 "noImplicitThis": true,
 "alwaysStrict": true
}

Typescript 기본 문법

기본 타입

• Boolean
• Number
• String
• Object
• Array
• Tuple
• Enum
• Any
• Void
• Null
• Undefined
• Never

변수에 타입 설정

let str: string = 'hi'
let num: number = 100

let arr: Array = [1,2,3]
let arr2: number[]=[1,2,3]

let obj:object = {}
let obj2:{name:string, age:number}={
	name:'lee',
    age:24
};
    

함수 타입 설정

function Add(a:number, b:number){
	return a+b
}

function log(a:string, b?:string, c?:string){
	console.log(a)
 }

자바스크립트에 존재하지 않는 타입

• Tuple : 배열의 타입 순서와 배열의 길이 지정

var arr:[string,number] = ['aa',100]

• Enum : Numver 또는 String 집합에 고정된 이름을 부여할 수 있는 타입이다. 값의 종류가 일정한 범위로 정해진다.

enum Shoes{
	Nike='나이키',
    Adidas="아디다스"
}

• Any : 모든 데이터 타입을 허용
• Void : undefined, null만 할당하고 함수에는 리턴 값을 설정할 수 없다.
• Never : 특정 값이 절대 발생할 수 없다.

Interface

인터페이스는 타입을 정의한 규칙이다. 일반적으로 타입 체크를 위해 사용된다. 함수, 변수, 클래스에서 사용한다.

interface User{
	age:number;
    name:string;
}

• 변수와 함수에 활용한 인터페이스

var person:User = {
	age:30,
    name:'kim'
}

function getUser(user:User){
	console.log(user)
}

• 인덱싱

interface StringArray{
	[index:number]:string
}

var arr2:StringArray = ['a','b','c']
arr[0]=10 //error

• 딕셔너리 패턴

interface StringRegexDictionary{
	[key:string]:RegExp
}

var obj:StringRegexDictionary={
	cssFile:/\.css$/,
    jsFile:'a'  //Error
}

obj['cssFile'] = /\.css$/
obj['jsFile'] = 'a' //Error

• 인터페이스 확장

interface Person{
	name:string;
    age:number;
}

interface User extends Person{
	language:string;
}

Operator

• Union
  OR 같은 의미의 타입이다. 각 타입의 공통된 속성에만 접근가능하다.

function askSomeone(someone:Developer2|Person){
	console.log(someone)
}

• Inersection
  AND 의미를 가진 타잊이다. 모든 타입이 포함된 객체를 넘기지 않으면 에러를 발생시킨다.

function askSomeone(someone:Developer2&Person){
	console.log(someone)
}

Generic

여러가지 타입에서 동작하는 컴포넌트를 만들 때 사용한다. 타입을 함수의 파라미터같이 사용한다.

function logText(text: T):T{
		return text;
}

logText<string>('aa');
logText<number>(100);

타입 추론

타입스크립트가 코드를 해석하는 과정이다.

• 배열에 담긴 값을 추론해서 Union 타입으로 묶는다.

var arr = [1,2,true]

타입은 Number|Boolean이 된다.

• 인터페이스와 제네릭을 이용한 타입

interface Dropdown{
	value:T,
    text:'String'
 }
 
 var items : Dropdown<boolean>{
 	value:true,
    text:'aa'
 }

타입 단언

타입스크립트가 해석하는 것보다 개발자가 코드에 확실한 목적으로 타입을 지정하는 것이다.

var a;
a=10;
a='string';
var b = a as string;

주로 Dom API 조작에서 많이 사용한다.

타입 호환

특정 타입이 다른 타입에 잘 호환되는지를 의미한다.

• 구조적 타이핑: 코드 구조 관점에서 서로 호환이 되는지 판단한다. 구조적으로 큰 타입은 작은 타입을 호환할 수 없다.

interface Developer{
	name:string;
    age:string;
}

interface Person{
	name:string;
}

var developer : Developer;
var person : Person;

developer = person //error
person = developer;

참조

활용도가 높아지는 웹 프론트엔드 언어, 타입스크립트(TypeScript)
TypeScript - Interface
타입스크립트 - 위키백과