https://www.interviewbit.com/typescript-interview-questions/
개인공부를 위해 번역이 되었으며, 번역이 틀릴 수 도 있습니다 :)

타입스크립트는 일반 JavaScript로 컴파일하는 정적 형식의 JavaScript 슈퍼셋입니다. 모든 브라우저, 호스트 및 운영 체제에서 실행됩니다. 즉, 유효한(valid?) 자바스크립트 코드는 모두 TypeScript 코드입니다. IntelliSense, 코드 완성, 안전한 리팩터링 등과 같은 고급 기능을 제공합니다.

TS를 쓰는이유 🤔

자바스크립트 프로젝트의 규모가 커지면서 유지보수가 어려워집니다. 여기에는 몇 가지 이유가 있습니다.

1. 자바스크립트는 대규모 애플리케이션을 구축하도록 설계되지 않았습니다. 원래 자바스크립트의 목적은 웹 페이지에 작은 스크립팅 기능을 제공하는 것이었습니다.

2. 최근까지 class, module 및 interface와 같은 대규모 프로젝트를 구조화하기위한 도구와 구조를 제공하지 않았습니다.

3. JavaScript는 동적으로 타입이 정해집니다. IntelliSense와 같은 기능은 지원하지 않습니다.

TypeScript 파일은 .ts 확장자를 사용하며, 자바스크립트 파일에 사용되는 .js 확장자와 다릅니다. TypeScript는 자바스크립트의 superset이기 때문에 모든 자바스크립트 코드는 타입스크립트 코드로 사용이 가능하고 .js 파일을 .ts로 바꾸면 아무것도 바뀌지 않습니다.

tsc 명령어를 사용하여 TypeScript 파일을 컴파일하면 Typescript 컴파일러는 실행이 가능한 JavaScript를 생성합니다.

TS의 장점 && 단점

장점

1. Type-safe 코드

2. IntelliSense 및 훌륭한 IDE 지원

3. 가독성과 유지보수가 좋은 코드

4. 크로스브라우징, 호환성 제공

단점

1. 추가로 빌드 과정이 필요함

2. 작은 프로젝트에서는 사용하기 적합하지 않음

3. 타입과 추가 문법으로 코드가 늘어날 수 있음

1. 타입스크립트에서 원시 타입이 뭘까요?

TypeScript에는 문자열(string), 숫자(number), 부울(boolean)의 세 가지 기본 유형이 있습니다. 이것들은 자바스크립트에서 비슷한 형태입니다.

• string: 텍스트 값(예: script, typescript)을 나타냅니다.

• number : 1, 2, 32, 43 등과 같은 숫자 값을 나타냅니다.

• boolean: 는 'true' 또는 'false' 값을 가질 수 있는 변수를 나타냅니다.

2. TypeScript에서 배열이 어떻게 작동하는지 설명해주세요.

우리는 배열을 같은 type의 값을 저장하기 위해 사용합니다. 배열들은 order되고 index되어진 값들의 모음입니다. 인덱싱은 0에서 시작합니다. 즉, 첫 번째 요소의 인덱스는 0이고 두 번째 요소의 인덱스는 1입니다.

TypeScript에서 배열을 선언하고 초기화하는 구문은 다음과 같습니다.

let values: number[] = [15, 20, 25, 30];

다른 방법으로 배열을 구체적으로 표현하는 문법도 제공합니다.

let values: Array<number> = [15, 20, 25, 30];

3. any 타입이 무엇일까요? 언제 사용을 할까요?

변수에 값을 저장하고 싶지만 그 변수의 type을 미리 알지 못하는 경우가 있습니다.

예를 들어 이런 상황은 API 사용 또는 사용자 input에서 나옵니다. any를사용하면 모든 유형의 값을 any 변수에 할당할 수 있습니다.

// third-party API로부터 받은 json
const employeeData: string = `{"name": "John Doe", "salary": 60000}`;

// employee객체를 build하기 위해 json parse
const employee: any = JSON.parse(employeeData);

console.log(employee.name);
console.log(employee.salary);

TypeScript는 명시적으로 type을 제공하지 않고 컴파일러가 주변 컨텍스트에서 type을 유추할 수 없는 경우 변수가 any이라고 가정합니다.

4. void란 무엇이며 언제 void 유형을 사용해야 할까요?

void는 변수에 유형이 없음을 나타냅니다. any와 반대되는 유형으로 작용합니다. 값을 반환하지 않는 함수에서 특히 유용합니다.

변수 유형이 void인 경우 해당 변수에 null 또는 undefined만 할당할 수 있습니다.

function notify(): void {
  alert("The user has been notified.");
}

5. unkown은 무엇이고 TypeScript에서 언제 사용해야 할까요?

unknown은 any의 type-safe한 버전입니다. unknown으로 선언한 변수에는 모든 type의 값을 할당할 수 있습니다. 하지만 unknown 의 변수는 unknown, any를 제외한 다른 type의 변수에 할당할 수 없습니다. 먼저 Type Assertion 혹은 Type narrowing으로 범위를 좁히지 않고는 unknown 변수에 대해 작업을 수행할 수 없습니다.

예시를 들어 설명해보겠습니다. unknown의 foo 변수를 만들고 여기에 string 값을 할당합니다.unknown 변수를 string 변수 bar에 할당하려고 하면 컴파일러에서 오류가 발생합니다.

let foo: unknown = "Akshay";
let bar: string = foo; // Type 'unknown' is not assignable to type 'string'.(2322)

`typeof` 검사 또는 비교 검사를 수행하거나 type guards를 사용하여 `unknown`의 변수를 특정한 것으로 narrow할 수 있습니다.

let foo: unknown = "Akshay";
let bar: string = foo as string;

6. 함수에서 타입을 어떻게 지정해줄까요?

함수는 특정 코드를 수행하기 위한 코드 블록입니다. 함수는 선택적으로 하나 이상의 인수를 취하여 처리하고 선택적으로 값을 반환할 수 있습니다.

다음은 함수를 만들고 호출하는 TypeScript 구문입니다.

function greet(name: string): string {
  return `Hello, ${name}`;
}

let greeting = greet("Anders");
console.log(greeting);  // "Hello, Anders"

7. TypeScript에서 객체를 어떻게 생성할까요?

객체는 사전(dictionary)과 같이 작동하며 key 및 value들의 모음입니다. key는 고유해야 합니다. 배열과 유사하며 연관(유사) 배열이라고도 합니다. 배열은 숫자(0,1, ..)를 사용하여 값을 인덱싱하는 반면 객체는 다른 type을 key로 사용할 수 있습니다.

TypeScript에서 객체는 속성이 있는 모든 값을 참조합니다. property와 해당 type을 나열하기만 하면 정의할 수 있습니다.

let pt: { x: number; y: number } = {
  x: 10,
  y: 20
};

8. TypeScript에서 선택적 속성( optional properties)을 지정하려면 어떻게 해야할까요?

객체 유형은 속성 이름 뒤에 '?'를 추가하여 선택적 속성(optional properties)을 가질 수 있습니다.

let pt: { x: number; y: number; z?: number } = {
  x: 10,
  y: 20
};
console.log(pt);

위의 코드에서 'z' 속성은 선택적 속성(optional properties)으로 표시되어 있으므로 초기화 중에 제공하지 않아도 컴파일 과정에서 문제가 없습니다.

9. null의 개념과 TypeScript에서의 사용예시를 설명해주세요.

프로그래밍에서 null 값은 값이 없음을 나타냅니다. null 변수는 어떤 객체도 가리키지(참조하지) 않습니다. 그렇기 때문에 변수의 속성에 액세스하거나 해당 메서드를 호출할 수 없습니다.

TypeScript에서 null 값은 'null' 키워드로 표시됩니다.

function greet(name: string | null) {
  // 두가지 경우 모두 내부에서 처리해준다.
  if (name === null) {
    console.log("Name is not provided");
  } else {
    console.log("Good morning, " + name.toUpperCase());
  }
}

var foo = null;
greet(foo); // "Name is not provided"

foo = "Anders";
greet(foo);  // "Good morning, ANDERS"

10. TypeScript에서 undefined가 뭘까요?

변수가 초기화 없이 선언되면 undefined가 할당됩니다. undefined 자체로는 별로 유용하지 않습니다. undefined와 다르게 null은 변수에 할당되었지만 값이 없음을 나타냅니다.

console.log(null == null); // true
console.log(undefined == undefined); // true
console.log(null == undefined); // true, with type-conversion
console.log(null === undefined); // false, without type-conversion
console.log(0 == undefined); // false
console.log('' == undefined); // false
console.log(false == undefined); // false