05 기본타입

정보

💡 타입스크립트는 자바스크립트에 타입을 추가하여 확장한 것.

자바스크립트(동적타입:Dynamic Type)
- 모든것이 런타임 시 결정됨
- 코드의 실행해 봐야 오류를 알게됨
타입스크립트(정적타입:Static Type)
- 컴파일 단계에서 결정됨
- 컴파일 시 오류유무가 판단

🔗공식핸드북

1. Primitives : 원시타입

정보

Primitives: 기본자료형 7종 (원시타입)

종류	설명
boolean	참(true) 또는 거짓(false) 값	let isDone: boolean = true;
number	정수와 실수를 포함한 숫자 값	let count: number = 42;
string	문자	let name: string = “야”;
null	값이 없음	let empty: null = null;
undefined	값이 정의되지 않음	let notSet: undefined;
symbol	고유하고 불변인 값, 주로 키로 사용
let sym: symbol = Symbol(“id”);
bigint	큰 정수	let big: bigint = 123n;

bigint JavaScript와 타입스크립트에서 도입된 원시 타입으로, 기존 number 타입이 표현할 수 있는 범위를 넘어서는 정수를 다룰 때 사용. number 타입은 IEEE 754 표준에 따라 64비트 부동소수점으로 표현되며, 안전하게 다룰 수 있는 최대 정수 값은 2^53 - 1(약 9,007,199,254,740,991: 구조 칠백십구억 이천오백사십칠만 사천구백구십일) 이다.

1.1. basic.ts

선언시 자료의 형태를 지정한다.
아래의 명령어를 터미널에 입력하면 실시간 컴파일이 된다.
npx tsc -w

1.1.1. string

문자타입지정
선언과 동시에 할당도 가능하다

1
let myName: string = 'mango';
2
console.log(myName);

자료형은 반드시 소문자로 작성한다 number(O) Number(X) 대문자로 작성시 오류가 발생하지는 않지만 Number 함수가 반환된다!!!!
Template Literal 의 사용

1
myName = `👌${myName}`;
2
console.log(myName);

1.1.2. number

숫자타입지정

1
{
2
  // number
3
  let n: number;
4
  n = 12;
5
  n = 12.1;
6
  n = -12.1;
7
  n = NaN;
8
  n = Infinity;
9
  console.log(n);
10
}

지정된 자료형 이외의 값을 할당하면 에러를 표시한다

1
  n = 'n';

1.1.3.boolean

논리타입을 지정해보자

1
  let cham: boolean = true;
2
  cham = false;
3
  console.log(typeof cham);

비교연산자를 사용할수도 있다

1
cham = 10 > 5;
2
console.log(cham);

JSON.parse로 형변환을 해보자

1
let realTrue: boolean ='true';

위의 코드는 불타입에 스트링타입이 할당되었으므로 오류가 반환된다.
JSON.parse 메서드를 사용하면 자료형 변환이 된다.

1
let realTrue: boolean = JSON.parse('true');

Boolean 함수로 형변환을 해보자

1
  realTrue = Boolean('true');
2
  console.log(typeof realTrue);

3과4의 차이는 뭘까? 콘솔의 결과는 둘다 불타입이다. 아래와 같이 비교해보자

1
  console.log(JSON.parse('true'));
2
  console.log(Boolean('false'));

Boolean() 은 0보다 큰 자료를 모두 true 로 변환하므로 false 문자열도 true 로 바뀌기에 예상치 못한 오류가 생길수 있다.

1.1.4. null, undefined

null과 undefined 도 별도의 타입으로 지정해야 한다.
null 타입지정

1
let x: null = null;
2
console.log(c);

undefined 타입지정

1
let b: undefined = undefined;
2
console.log(b);

?? nullish 널병합연산자를 사용해보자 🔗https://ko.javascript.info/nullish-coalescing-operator

1
let c = x ?? 'test';
2
console.log(c);

?? 좌항이 null이면 우항을 실행-> x는 null 이므로 test 가 실행

2. Non-Primitive(비원시타입)

정보

Non-Primitives: 기본자료형 8종 (비원시타입/특수타입)

종류	설명
object	키-값 쌍으로 구성된 데이터 구조	let user: object = { name: “야” };
array	동일한 타입의 요소를 순서대로 저장	let list: number[] = [1, 2, 3];
tuple	고정된 길이와 타입을 갖는 배열	let pair: [string, number] = [“야”, 1];
enum	특정 값들의 집합을 이름으로 정의	enum Color { Red, Green, Blue };
function	실행 가능한 코드 블록	let add: (a: number, b: number) => number;
any	모든 타입을 허용하는 동적 타입	let anything: any = “야”
void	함수 반환 값이 없을 때 사용	function log(): void { console.log(“야”); }
never	절대 발생하지 않는 값	function fail(): never { throw new Error(); }

2.1. object

🔗https://www.typescriptlang.org/ko/docs/handbook/2/everyday-types.html#%EA%B0%9D%EC%B2%B4-%ED%83%80%EC%9E%85

객체타입지정

1
 //object
2
  let obj: object = {name: 'mango', age: 7};

기타 등등 타입

1
  const obj1: object = {};
2
  const obj2: object = [];
3
  const obj3: object = function(){};

자바스크립트의 원시타입만 빼고 모두 다 object 타입으로 지정이 가능하다.

특이점은 값을 꺼내어 쓸때 발생하게 된다.

1
console.log(obj.name;);

위의 코드는 오류를 반환한다. obj 식별자의 타입은 지정이 되었으나 name 프로퍼티의 타입은 지정되지 않았기 때문이다.

아래와 같이 obj의 타입선언을 수정한다.

1
let obj: {name:string; age:number} = {name: 'mango', age: 7};
2
console.log(obj.name;);

이제 콘솔창에서 name 속성의 값을 볼수있다. 타입스크립트에서 타입 지정 대상은 모든 변수라는 점을 기억하자. 또한 객체의 타입 지정시 문법이 헷갈릴수 있으니 주의해야한다.

2.2. array

https://www.typescriptlang.org/ko/docs/handbook/2/everyday-types.html#%EB%B0%B0%EC%97%B4

배열타입을 지정해보자

1
  //array
2
  const arr:[]=[]
3
  const arrT: Array<[]> = [];

배열의 타입지정은 대괄호를 사용하거나 제네릭 표기법을 사용한다.

배열 내에서 사용할 데이터도 각각의 타입을 지정해야 한다. 1의 예시의 식별자들은 빈 배열만 사용할수 있다.

1
    {
2
      const arr: number[] = [1, 2, 3, 4];
3
      const arrT: Array<number> = [1, 2, 34];
4
      console.log(`${arr},//////////,${arrT}`);
5
    }
6
   {
7
      const arr: string[] = ["a","b"];
8
      const arrT: Array<string> = ["a","b"];
9
      console.log(`${arr},//////////,${arrT}`);
10
    }

혼합된 데이터는 인덱스 번호에 맞게 타입을 지정한다.

1
 const arr: [string, string, number, number, object, number[]] = ['a', 'b', 1, 2, {}, [1, 2]];

이차원배열

1
//동일데이터
2
const nestArr:number[][] = [
3
  [1, 2, 3],
4
  [11, 21, 31],
5
  [111, 211, 311],
6
];
7
//// 제네릭
8
const nestArrT: Array<Array<number>> = [
9
  [1, 2, 3],
10
  [11, 21, 31],
11
  [111, 211, 311],
12
];
13

14
//다중데이터 => 튜플
15
const mixArr: [number, string, number[], {}] = [1, 'a', [1, 2, 3], {}];

2.2.1. Tupel(튜플)

타입스크립트에서 튜플(tuple)은 배열 자료형의 특별한 형태로 배열내의 자료형이 복합적일때 각각 선언하는 것을 말한다.

특징

고정된 길이를 가짐
각 위치마다 특정 타입이 지정됨

예시

1
const user: [string, number] = ['mango', 8];

2.2.2.Optional Property(옵셔널프로퍼티)

🔗https://www.typescriptlang.org/ko/docs/handbook/2/everyday-types.html#%EC%98%B5%EC%85%94%EB%84%90-%ED%94%84%EB%A1%9C%ED%8D%BC%ED%8B%B0

동적으로 관리되는 배열 자료형은 어떻게 타입을 선언해야 할까?1

아래의 코드는 타입선언과 데이터의 길이가 맞지 않아 오류가 난다.

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

아래 추가된 ?가 붙은 타입은 옵셔널프로퍼티 라고 한다.

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

옵셔널속성은 잠재적으로 사용할 타입을 선언하는 개념으로 타입을 선택적으로 지정할수 있게한다.

Spread Operator 를 사용한 타입선언

1
  let b: string[] = ['a', 'b', 'c'];
2
  let merge: [number, ...string[]] = [a, ...b];
3
  console.log(merge);

2.3. any 와 unknown

2.3.1. any

모든 타입허용 NextJs에서 오류남

1
  {
2
    //any
3
    let val: any = 10;
4
    val = 'a';
5
    val = () => {};
6
    val = [1, 2];
7
  }

2.3.2. unknown

타입이 정해지지 않았음. 일단 통과

1
  let a: unknown = 3;

2.3.3. 비교

any 타입은 모든 타입이 허용되므로 숫자 전달시에도 에러가 런타임에서 확인됨

1
  function anyVal(value: any) {
2
    console.log(value.toUpperCase());
3
  }
4

5
  anyVal('abcd');
6
//  anyVal(1234);

unknown 타입은 값의 사용시 오류가 난다.

1
  function unVal(value: unknown) {
2
    console.log(value.toUpperCase());
3
  }
4

5
  unVal('abcd');

아래와 같이 타입을 검사하는 코드를 작성해야 한다.

1
  function unVal(value: unknown) {
2
    //console.log(value.toUpperCase());
3
    if (typeof value === 'string') {
4
      console.log(value.toUpperCase());
5
    } else {
6
      console.error('string 타입만 가능');
7
    }
8
  }

항목	`any`	`unknown`
타입 체크	전혀 없음	타입 검사 필요
타입 안정성	낮음	높음
코드 안전성	런타임 오류 발생 가능	컴파일 단계에서 오류 방지 가능
타입 좁히기 필요 여부	❌ 없음	✅ 반드시 필요

3. 문제

출처: 수코딩

3.1.

1. 문제: 문자열 변수 선언

string 타입을 사용하여 "Hello"라는 값을 갖는 문자열 변수를 선언하고, 이 값을 출력하세요.

2. 문제: 숫자 변수 선언

number 타입을 사용하여 42라는 숫자를 갖는 변수를 선언하고, 출력하세요.

3. 문제: 불리언 변수 선언

boolean 타입을 사용하여 true 값을 갖는 변수를 선언하고, 출력하세요.

4. 문제: 숫자 배열 선언

Array<number> 또는 number[] 타입을 사용하여 숫자 배열을 선언하고, 배열의 요소들을 출력하세요.

5. 문제: 문자열 배열 선언

Array<string> 또는 string[] 타입을 사용하여 문자열 배열을 선언하고, 배열의 요소들을 출력하세요.

6. 문제: 튜플 변수 선언

tuple 타입을 사용하여 숫자와 문자열이 섞인 튜플을 선언하고, 이 값을 출력하세요.

7. 문제: `null` 값 할당

null 타입을 사용하여 null 값을 갖는 변수를 선언하고, 이를 출력하세요.

8. 문제: `undefined` 값 할당

undefined 타입을 사용하여 undefined 값을 갖는 변수를 선언하고, 이를 출력하세요.

9. 문제: 객체 선언

object 타입을 사용하여 이름과 나이를 포함하는 객체를 선언하고, 이를 출력하세요.

3.2.

1. 문제: 중첩된 객체

1
let employee = {
2
  id: 123,
3
  name: "John Doe",
4
  contact: {
5
    email: "john.doe@example.com",
6
    phone: "123-456-7890"
7
  },
8
  department: "Engineering"
9
};

이 변수의 타입을 지정하세요.

2. 문제: 객체 배열에서 특정 값 찾기

1
let students = [
2
  { name: "Alice", age: 22, grade: "A" },
3
  { name: "Bob", age: 24, grade: "B" },
4
  { name: "Charlie", age: 21, grade: "C" }
5
];

이 변수의 타입을 지정하세요.

3. 문제: 숫자 배열에서 최댓값 구하기

1
let numbers = [10, 20, 30, 40, 50];

이 변수의 타입을 지정하세요.

4. 문제: 객체 배열에서 특정 조건 만족하는 객체 찾기

1
let users = [
2
  { name: "Alice", age: 30, active: true },
3
  { name: "Bob", age: 25, active: false },
4
  { name: "Charlie", age: 35, active: true }
5
];

이 변수의 타입을 지정하세요.

5. 문제: 중첩된 배열

1
let nestedArray = [["apple", "banana"], [1, 2, 3], ["cherry"]];

이 변수의 타입을 지정하세요.

6. 문제: 문자열 배열에서 길이가 5 이상인 문자열 찾기

1
let words = ["apple", "banana", "cherry", "kiwi"];

이 변수의 타입을 지정하세요.

7. 문제: 여러 객체가 섞인 배열

1
let items = [
2
  { id: 1, name: "Item1", price: 100 },
3
  { id: 2, name: "Item2", price: 200 },
4
  ["discount", 10]
5
];

이 변수의 타입을 지정하세요.

8. 문제: 복합적인 객체

1
let profile = {
2
  user: { name: "John", age: 30 },
3
  preferences: ["coding", "reading", "travelling"],
4
  isActive: true
5
};

이 변수의 타입을 지정하세요.

9. 문제: 여러 타입을 가진 배열

1
let mixedData = ["apple", 10, true, "banana", 20];

이 변수의 타입을 지정하세요.

10. 문제: 중첩된 객체에서 키 접근하기

1
let company = {
2
  name: "Tech Corp",
3
  address: {
4
    street: "123 Main St",
5
    city: "Tech City",
6
    country: "Techland"
7
  }
8
};

이 변수의 타입을 지정하세요.

3.3

1. 문제: 중첩된 객체와 다양한 배열을 포함한 데이터

1
let complexData = {
2
  id: 1,
3
  name: "Product A",
4
  details: {
5
    description: "This is a great product",
6
    dimensions: {
7
      height: 10,
8
      width: 5,
9
      depth: 2
10
    },
11
    tags: ["sale", "new", "featured"]
12
  },
13
  reviews: [
14
    { user: "Alice", rating: 4.5, comment: "Excellent!" },
15
    { user: "Bob", rating: 3.0, comment: "Decent product." }
16
  ]
17
};

이 변수의 타입을 지정하세요.

2. 문제: 다차원 배열과 객체 혼합 구조

1
let dataset = [
2
  [{ id: 1, value: "a" }, { id: 2, value: "b" }],
3
  [{ id: 3, value: "c" }, { id: 4, value: "d" }],
4
  [{ id: 5, value: "e" }, { id: 6, value: "f" }]
5
];

이 변수의 타입을 지정하세요.

3. 문제: 중첩된 객체 배열에 조건이 다른 값 포함하기

1
let mixedData = [
2
  { type: "user", name: "Alice", age: 30 },
3
  { type: "user", name: "Bob", age: 25 },
4
  { type: "product", id: 1, name: "Laptop", price: 999 },
5
  { type: "product", id: 2, name: "Smartphone", price: 499 }
6
];

이 변수의 타입을 지정하세요.

4. 문제: 배열 안에 객체와 튜플이 섞인 구조

1
let dataSet = [
2
  { name: "Item A", price: 100 },
3
  [ "item1", 50 ],
4
  { name: "Item B", price: 200 },
5
  [ "item2", 75 ]
6
];

이 변수의 타입을 지정하세요.

5. 문제: 고급 배열과 객체의 중첩된 관계

1
let complexStructure = [
2
  { id: 1, value: "apple", attributes: { weight: 1.2, color: "green" }},
3
  { id: 2, value: "banana", attributes: { weight: 0.5, color: "yellow" }},
4
  { id: 3, value: "cherry", attributes: { weight: 0.2, color: "red" }}
5
];

이 변수의 타입을 지정하세요.

6. 문제: 배열 안에 객체와 중첩된 배열이 섞인 구조

1
let nestedData = [
2
  { id: 1, tags: ["fruit", "sweet"], name: "apple" },
3
  { id: 2, tags: ["fruit", "tropical"], name: "mango" },
4
  { id: 3, tags: ["fruit", "berry"], name: "strawberry" }
5
];

이 변수의 타입을 지정하세요.

7. 문제: 다양한 타입을 가진 배열로 구성된 객체

1
let profile = {
2
  name: "Alice",
3
  age: 28,
4
  favorites: [ "reading", 42, true, 99.9 ],
5
  address: {
6
    street: "123 Main St",
7
    city: "Metropolis"
8
  }
9
};

이 변수의 타입을 지정하세요.

8. 문제: 중첩된 객체 배열에서 특정 조건을 만족하는 값 찾기

1
let userData = [
2
  { user: { name: "John", age: 32 }, status: "active" },
3
  { user: { name: "Doe", age: 28 }, status: "inactive" },
4
  { user: { name: "Jane", age: 35 }, status: "active" }
5
];

이 변수의 타입을 지정하세요.

9. 문제: 배열 안에 객체와 다른 배열이 포함된 구조

1
let collection = [
2
  { id: 1, name: "Item 1", price: 100 },
3
  ["Discount", 20],
4
  { id: 2, name: "Item 2", price: 200 },
5
  ["Discount", 10]
6
];

이 변수의 타입을 지정하세요.

10. 문제: 객체 배열의 각 항목이 서로 다른 구조를 가진 배열

1
let mixedItems = [
2
  { id: 1, type: "food", name: "Pizza", size: "Large" },
3
  { id: 2, type: "drink", name: "Coke", size: "Medium" },
4
  { id: 3, type: "food", name: "Burger", size: "Small" }
5
];

이 변수의 타입을 지정하세요.

05 기본타입

** **🔗공식핸드북

1. Primitives : 원시타입

1.1. basic.ts

1.1.1. string

1.1.2. number

1.1.3.boolean

1.1.4. null, undefined

2. Non-Primitive(비원시타입)

2.1. object

2.2. array

2.2.1. Tupel(튜플)

2.2.2.Optional Property(옵셔널프로퍼티)

2.3. any 와 unknown

2.3.1. any

2.3.2. unknown

2.3.3. 비교

3. 문제

3.1.

1. 문제: 문자열 변수 선언

2. 문제: 숫자 변수 선언

3. 문제: 불리언 변수 선언

4. 문제: 숫자 배열 선언

5. 문제: 문자열 배열 선언

6. 문제: 튜플 변수 선언

7. 문제: null 값 할당

8. 문제: undefined 값 할당

9. 문제: 객체 선언

3.2.

1. 문제: 중첩된 객체

2. 문제: 객체 배열에서 특정 값 찾기

3. 문제: 숫자 배열에서 최댓값 구하기

4. 문제: 객체 배열에서 특정 조건 만족하는 객체 찾기

5. 문제: 중첩된 배열

6. 문제: 문자열 배열에서 길이가 5 이상인 문자열 찾기

7. 문제: 여러 객체가 섞인 배열

8. 문제: 복합적인 객체

9. 문제: 여러 타입을 가진 배열

10. 문제: 중첩된 객체에서 키 접근하기

3.3

1. 문제: 중첩된 객체와 다양한 배열을 포함한 데이터

2. 문제: 다차원 배열과 객체 혼합 구조

3. 문제: 중첩된 객체 배열에 조건이 다른 값 포함하기

4. 문제: 배열 안에 객체와 튜플이 섞인 구조

5. 문제: 고급 배열과 객체의 중첩된 관계

6. 문제: 배열 안에 객체와 중첩된 배열이 섞인 구조

7. 문제: 다양한 타입을 가진 배열로 구성된 객체

8. 문제: 중첩된 객체 배열에서 특정 조건을 만족하는 값 찾기

9. 문제: 배열 안에 객체와 다른 배열이 포함된 구조

10. 문제: 객체 배열의 각 항목이 서로 다른 구조를 가진 배열

🔗공식핸드북

7. 문제: `null` 값 할당

8. 문제: `undefined` 값 할당