Over Tech

타입스크립트( Typescript )의 특징은 변수, 함수, 객체 등에 데이터 타입을 지정하여 오류를 줄이는 역할을 한다. 관대한 자바스크립트( Javascript )의 변수 지정에 데이터 타입을 지정하는 것이 타입스크립트이다. 자바스크립트에서는 변수에 어떤 값이든 자유롭게 넣을 수 있지만, 타입스크립트는 변수, 함수, 객체에 들어갈 값의 종류를 미리 지정할 수 있다. 자바 또는 C# 과 같은 언어들에 데이터 타입을 지정하는 것과 같다고 볼 수 있다. 타입스크립트의 타입에는 여러 종류가 있다. 굳이 나열하면 string, number, boolean, array, object, null, undefined, any, unknown, union, void 가 있다. 타입스크립트 기본 타입 종류 | 변수 함수 객체 등에 지정하는 자료형 ⊙ 타입스크립트 기본 타입 종류 타입스크립트는 자바스크립트에 자료형을 지정한 것이라 볼 수 있으며, 이것을 타입( type )이라 칭한다. 자바스크립트가 자료형에 관대한 특징이 있기 때문에, 의도하지 않은 코드 동작의 오류가 발생할 수 있다. 예를 들어, 자바스크립트의 + 연산자가 대표적인데, + 연산자는 숫자간 덧셈 연산도 하지만, 문자열에 + 가 들어간 경우 문자열 연결 동작을 하기 때문이다. 이 외에도 여러가지 경우들이 있다. 구구절절 말은 많았지만, 자바 또는 C# 처럼 자료형( 데이터 타입, data-type )을 지정한다고 보면 이해가 쉽다. 타입스크립트의 타입 자료형에는 여러가지가 존재하는데 그 중 일부는 다음과 같다. string : 문자열 number : 숫자 boolean : 참/거짓 array : 배열 string[] : 문자열 배열 number[] : 숫자 배열 type : 타입 별칭 interface : 객체 구조 string | number : 문자열 또는 숫자 object : 객체 타입 null : 값이 비어 있음 undefined : 값이 할당되어 있지 않음 any : 아무 타입이나 가능 unknown ...

~~~ 타입스크립트를 사용할 때 가끔씩 변수나 함수의 타입을 무엇으로 지정해야 할지 난해해지는 상황이 생길 수 있다. ( 이런 경우 거의 없겠지만, 숫자 타입을 사용할 때 간혹 이런 일이 생긴다. ) 변수나 함수 등의 타입을 임의로 선택할 수 있는 방법은 any 타입을 사용하는 것이다. any를 지정하면 문자열, 숫자, 객체 등 여러 값을 자유롭게 저장할 수 있다. 자바스크립트의 var 와 비슷하다고 해야 할까 ?? 그렇기 때문에, 타입 검사도 함께 약해지며 잘못된 코드가 컴파일 과정에서 발견되지 않을 수 있다. 즉, 사용을 해도 괜찮지만, 가급적 사용하지 않는 것을 권장하기도 한다. ~~~ Copy let value: any; value = "안녕하세요"; value = 100; value = true; value = { name: "민수" }; ~~~ Copy let age: number = 20; age = 30; // 정상 age = "서른"; // 오류 ~~~ Copy let age: any = 20; age = "서른"; // 컴파일 오류 없음 age = true; // 컴파일 오류 없음 ~~~ Copy let data: any = "TypeScript"; console.log(data); ~~~ Copy data = 100; data = false; data = ["TypeScript", "JavaScript"]; ~~~ Copy function printValue(value: any): void { console.log(value); } printValue("문자열"); printValue(100); printValue(true); printValue({ name: "홍길동" }); ~~~ Copy function printUpperCase(value: any...

~~~ 타입스크립트에서 객체 타입을 사용할 때, 보통, 객체의 속성은 입력하게 되겠지만, 굳이 필수가 아닌 속성은 생략될 수 있다. 예를 들어, 회원 정보에서 name은 필수로 사용되겠지만, phone이나 profileImage는 사용자의 입력은 필수가 아닌 옵션이 될 수 있다. 이때 사용할 수 있는 타입스크립트 문법이 선택적 속성( Optional Property )이다. 선택적 속성( Optional Property )은 속성 뒤에 물음표( ? )를 붙여 설정할 수 있다. ~~~ Copy interface User { name: string; email?: string; } ~~~ Copy interface User { id: number; name: string; email?: string; } ~~~ Copy interface User { id: number; name: string; email?: string; } const user1: User = { id: 1, name: "민수", }; const user2: User = { id: 2, name: "지수", email: "jisu@example.com", }; ~~~ Copy const user3: User = { id: 3, }; ~~~

타입스크립트로 코드를 작성하는 경우 읽기 속성을 이용해 객체, 클래스, 필드, 배열, 튜플 등의 값을 변경 또는 수정할 수 없도록 고정시킬 필요가 생긴다. 주로, 사용자 번호, 주문 번호, 생성일처럼 처음 생성되고 설정된 경우 절대 바뀌면 안 되는 값이 대표적일 것이다. 이런 경우 사용할 수 있는 키워드가 readonly 키워드이다. readonly 키워드는 단순히 읽기 만 가능한 것으로, 타입 검사 과정에서 값의 재설정 또는 재할당이 금지된다. 단, readonly 키워드는 문자열 또는 숫자형과 같은 일반 변수에는 사용할 수 없으며, 일반 변수에서 읽기 속성을 사용하고자 한다면 const를 사용한다. ~ Copy interface User { readonly id: number; name: string; } ~ Copy const user: User = { id: 1, name: "민수", }; console.log(user.id); user.name = "지수"; ~

- 타입스크립트에서 extends를 사용하면 인터페이스를 확장할 수 있다. 예를 들어, User 타입은 있을 때, 관리자 정보를 추가하고 싶거나, 공통 속성은 재사용 하면서 특정 화면에 필요한 속성만 더하고 싶을 때 인터페이스 확장을 위해 extends를 사용할 수 있다. 타입스크립트에서 extends는 기존 인터페이스의 멤버 데이터를 가져오고 새 멤버를 추가하는 방식이라 볼 수 있다. - Copy interface User { id: number; name: string; } interface AdminUser extends User { role: "admin"; } - Copy const admin: AdminUser = { id: 1, name: "Kim", role: "admin", }; - Copy interface User { id: number; name: string; } interface AdminUser { id: number; name: string; role: "admin"; } - Copy interface AdminUser extends User { role: "admin"; } - Copy interface User { id: number; name: string; email: string; } interface PaidUser extends User { membershipLevel: "basic" | "premium"; } - Copy const user: PaidUser = { id: 100, name: "Lee", email: "lee@example.com", membershipLevel: "premium", }; - Copy interface Pro...

- 타입스크립트에는 interface가 있다. 객체의 구조, 함수 인자, 클래스의 속성과 메서드를 미리 정할 때 인터페이스를 사용한다. 자바와 C#에 있는 인터페이스와 의미는 같다. 인터페이스는 객체가 어떤 속성을 가져야 하는지 정리해 두는 설계도라 볼 수도 있다. - Copy interface User { id: number; name: string; email: string; } const user: User = { id: 1, name: "Kim", email: "kim@example.com", }; - Copy const user: User = { id: 1, name: "Kim", // email 속성이 없어서 오류 발생 }; -

- 타입스크립트에는 type 키워드가 있다. type 키워드는 타입을 별칭( Alias )를 설정하여 사용하는 것으로, 반복해서 쓰는 타입에 이름을 붙여 재사용할 수 있도록 하고 있다. type 키워드를 사용하는 대표적은 것이 객체 타입 또는 유니온 타입, 함수, 제너링 등이이다. 이들의 특징은 여러 곳에서 반복해서 사용할 수 있다는 점에 있다. 즉, type 키워드는 반복해서 사용할 수 있는 타입에 별칭을 붙여 사용할 수 있도록 한다. - type UserName = string; const name: UserName = "Kim"; - const name1: string = "Kim"; type UserName = string; const name2: UserName = "Lee"; - type 별칭이름 = 타입; - type Age = number; type IsActive = boolean; type UserId = string; - type UserId = string; function getUser(id: UserId) { console.log(id); } getUser("user-001"); - type User = { id: number; name: string; email: string; }; const user: User = { id: 1, name: "Kim", email: "kim@example.com", }; - function printUser(user: { id: number; name: string; email: string }) { console.log(user.name); } - type User = { id: number; name: string; email: string; }; function printUser(user: User) { co...