[Typescript] 1. ts-for-jsdev 타입스크립트 기초 문법 공부

타입스크립트 기초 문법

• 기본 타입
• 배열과 튜플
• 객체
• 타입 별칭
• 함수
• 제네릭
• 유니온 타입
• 인터섹션 타입
• 열거형

 

Typescript

---

- 정적 타입 시스템 static type system을 도입한 자바스크립트

- TS는 JS의 상위집합.

- TS는 정적 타입 언어로써, 실사용자가 맞닥뜨리는 버그 중 약 15%를 사전에 예방이 가능하다고 한다.

- 자동완성 -> 컴파일러 및 코드 에디터가 코드를 실행하지 않고도 프로그램에 대해 훨씬 더 많은 정보를 제공해준다.

- 실행 전, 타입 검사를 하기 때문에 타입 정의와 다르게 동작하는 프로그램은 실행 자체가 불가능하다.

 

점진적 타이핑

---

점진적으로 타입 안정성을 키워가는 것을 허용하는 타입 시스템

 

기본타입

---

boolean

const a: boolean = true or false;

number

const a: number = 10;

string

const a: string = 'hello world';

null / undefined

- undefined: 변수를 선언하고 값을 할당하지 않은 상태

- null: 변수를 선언하고 빈 값을 할당한 상태

const nullVal: null = null;
const undefinedVal: undefined = undefined;

const numVal: number = null;
// error: TS2322: Type 'null' is not assignable to type 'number'

 

TS가 제공하는 특별한 타입

---

any

- any 타입은 모든 타입과 호환 가능

- any 타입 값의 메소드를 호출할 시에도 타입 검사가 아예 수행되지 않는다.

const anyVal: any = true;
anyVal = 3;
anyVal = 'hello world';
anyVal = {};

// any 타입은 모든 타입과 호환 가능.

void

function nothing(): void { 
	//...
}

never

- never 타입은 존재할 수 없는 값을 암시하기 때문에, never 타입은 보통 에러 처리에 사용된다고한다.

function errorThrow(): never {
	throw new Error('error..');
}

 

배열과 튜플

---

Array

const a: number[] = [0, 1, 2, 3];

const b: string[] = ['a', 'b', 'c'];

const c: Array<number> = [0, 1, 2, 3];

const d: Array<string> = ['a', 'b', 'c'];

tuple

- tuple 타입 변수는 정확히 명시된 개수 만큼의 원소만을 가질 수 있다.

const a: [string, number] = ['a', 1];

//error 
const a: [string, number] = ['a', 1. 2]; 
//정확하게 명시된 개수 만큼의 원소만 가질 수 있다.

// Array 프로토타입 메소드를 통해 조작하는 것은 가능하다.
const a: [string, number] = ['a', 1];
a.push(2);

 

객체

---

object type

const a: { name: string; age: number; } = { name: 'a', age: 10 };

선택 속성

- 물음표 (?) 를 붙여 해당 속성이 존재하지 않을 수도 있음을 표현가능

const a: { name: string; age?: number; } = { name: 'a'};
// age?:number

readonly

- readonly 키워드를 붙여 해당 속성의 재할당을 막을 수 있다. ex) const 와 비슷한 동작

const a = {
	readonly name: string;
	age: number;
} = { name: 'a', age: 10 }

 

타입 별칭

---

- 별칭을 갖게 될 타입의 자리엔 기본 타입을 포함한 모든 타입이 올수있다.

- type은 단순히 새로운 이름을 붙일 뿐이고, 실제로 새로운 타입이 생성되는것이 아니다.

 

type a = string;
type b = number;
type c = CarList[];
type d = {
	name: string;
    age: number;
}


type UUID = string;

function geUser(uuid : UUID) {
	//..
}

getUser(7);
// error
// : uuid 의 타입은 string 이며, number 타입이 아니기 때문에 에러 발생.

 

함수

---

function

함수의 타입을 결정하기 위한 2가지 정보가 필요하다.

- 매개변수 parameter 타입

- 반환 값 return type 

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

void

- 리턴이 필요 없을 경우

function logEvt(logStr: string): void {
	logInstEvt(logStr);
}

Array Function

화살표 함수 문법 예시

const a: (a: number, b:number) => number = sum;
const b: () => number = () => 2;
const c: (a: number, b:number) => number = (a, b) => (a + b);


type sumTypes = (a: number, b: number) => number
const resSum: sumTypes = (a, b) => (a + b);

기본 매개변수

ES6와 마찬가지로 TS에서도 기본 매개변수 문법을 사용 가능하다.

function testEvt(name: string = 'helloworld') {

}

선택 매개변수

function testEvt(name: string = 'helloworld', age?: number) {

}


//매개변수 정의 순서에 선택매개변수 이후에 필수 매개변수를 두 는 것은
//허용하지 않는다.
function testEvt(age?: number, name: string) {

}
// error TS1016: A required parameter cannot follow an optional parameter.

함수 오버로딩

* 오버로딩: 한 클래스 내에 같은 이름의 메서드를 여러 개 정의하는 것

 

TS의 함수 오버로딩은 아래와 같은 특징을 가진다.

 

1. 함수는 하나 이상의 타입 시그니처를 가질 수 있다.

2. 함수는 단 하나의 구현을 가질 수 있다. 

function doubleString(str: string): string {
    return `${str}${str}`;
}

function doubleNumber(num: number): number {
    return (num * 2);
}

function doubleBooleanArray(arr: boolean[]): boolean[] {
    return arr.concat(arr);
}

This 타입

this 값은 함수가 정의되는 시점이 아닌 실행되는 시점에 결정하게 만들기 때문에

함수 내부에서 this 의 타입을 추론하는 일을 매우 어렵게 만든다.

 

-> TS는 이런 어려움을 해결하기 위해 함수 내에서의 this 타입을 명시할 수단을 제공한다.

 

interface HTMLElement {
	tagName: string;
}

interface Handler {
	(this: HTMLElement, event: Event, callback: () => vold): void;
}

let cb: any;

const onClick: Handler = function(event, cb) {
	
    cb();
}

 

제네릭

---

제네릭을 사용하면 데이터 타입을 동적으로 지정할 수 있으므로,

코드의 재사용성을 높이고 타입 안정성을 보장할 수 있다.

function functionName<T>(param: T): T {
  // 함수 내부 로직
}

function identity<T>(value: T): T {
  return value;
}

// 문자열을 전달하고 문자열을 반환
const result1 = identity<string>("Hello, World!");
console.log(result1);

// 숫자를 전달하고 숫자를 반환
const result2 = identity<number>(42);
console.log(result2);

interface KeyValuePair<K, V> {
  key: K;
  value: V;
}

const pair1: KeyValuePair<string, number> = { key: "age", value: 30 };
const pair2: KeyValuePair<string, string> = { key: "name", value: "John" };

 

유니온 타입

---

여러 경우 중 하나인 타입을 표현

function square(value: number, returnString: boolean = false): string | number {
  /* 본문 동일 */
}
const stringOrNumber: string | number = square(randomNumber, randomBoolean);

type Whatever = number | string | boolean;

 

인터섹션 타입

---

여러 경우에 모두 해당

type Person = {
  name: string;
  age: number;
};

type Employee = {
  employeeID: string;
  jobTitle: string;
};

// Person과 Employee 타입을 결합한 타입
type PersonWithJob = Person & Employee;

const person: Person = {
  name: 'John',
  age: 30,
};

const employee: Employee = {
  employeeID: 'E12345',
  jobTitle: 'Software Developer',
};

const personWithJob: PersonWithJob = {
  name: 'Alice',
  age: 28,
  employeeID: 'E98765',
  jobTitle: 'Product Manager',
};

console.log(personWithJob);
// {
//   name: 'Alice',
//   age: 28,
//   employeeID: 'E98765',
//   jobTitle: 'Product Manager'
// }

 

열거형

---

enum은 명명된 상수 집합을 정의할 때 사용된다. 열거형은 가독성을 향상 시키고

코드를 더 명확하게 만들며, 실수로 잘못된 값이 사용되는 것을 방지하는데 도움을 준다.

 

열거형은 숫자나 문자열 값 중 하나를 선택할 수 있는 안전한 타입을 제공한다.

 

Numeric Enum

enum Direction {
  Up = 1,     // 1
  Down,       // 2
  Left,       // 3
  Right,      // 4
}

let userDirection: Direction = Direction.Up;
console.log(userDirection); // 1

String Enum

enum Direction {
  Up = 1,     // 1
  Down,       // 2
  Left,       // 3
  Right,      // 4
}

let userDirection: Direction = Direction.Up;
console.log(userDirection); // 1

요일 열거형

enum Day {
  Sunday,
  Monday,
  Tuesday,
  Wednesday,
  Thursday,
  Friday,
  Saturday,
}

function isWeekend(day: Day): boolean {
  return day === Day.Saturday || day === Day.Sunday;
}

const today = Day.Wednesday;
console.log(`Is today a weekend day? ${isWeekend(today)}`); // false

 

참고

- 위의 모든 내용은 아래의 링크에서 보면서 공부한 내용을 정리한내용입니다.

좀 더 자세한 내용은 아래의 링크를 클릭해주세요.

 

https://ahnheejong.gitbook.io/ts-for-jsdev/

자바스크립트 개발자를 위한 타입스크립트 - ts-for-jsdev