diff --git a/client/modules/IDE/actions/preferences.js b/client/modules/IDE/actions/preferences.ts
similarity index 57%
rename from client/modules/IDE/actions/preferences.js
rename to client/modules/IDE/actions/preferences.ts
index f6e71504ee..495c7c1d7f 100644
--- a/client/modules/IDE/actions/preferences.js
+++ b/client/modules/IDE/actions/preferences.ts
@@ -1,8 +1,40 @@
 import i18next from 'i18next';
 import { apiClient } from '../../../utils/apiClient';
 import * as ActionTypes from '../../../constants';
+import type {
+  UpdatePreferencesRequestBody,
+  UserPreferences,
+  Error
+} from '../../../../server/types';
 
-function updatePreferences(formParams, dispatch) {
+export interface BaseAction {
+  type: string;
+}
+
+export interface ActionWithValue extends BaseAction {
+  value: string | number | boolean;
+}
+
+export interface ActionWithError extends BaseAction {
+  error: Error['error'];
+}
+
+export interface ActionWithLanguage extends BaseAction {
+  language: string;
+}
+
+export interface State {
+  user: {
+    authenticated: boolean;
+  };
+}
+
+function updatePreferences(
+  formParams: UpdatePreferencesRequestBody,
+  dispatch: (
+    action: ActionWithValue | ActionWithError | ActionWithLanguage
+  ) => void
+) {
   apiClient
     .put('/preferences', formParams)
     .then(() => {})
@@ -14,16 +46,18 @@ function updatePreferences(formParams, dispatch) {
     });
 }
 
-export function setPreferencesTab(value) {
+export function setPreferencesTab(value: number): ActionWithValue {
   return {
     type: ActionTypes.SET_PREFERENCES_TAB,
     value
   };
 }
 
-export function setFontSize(value) {
-  return (dispatch, getState) => {
-    // eslint-disable-line
+export function setFontSize(value: UserPreferences['fontSize']) {
+  return (
+    dispatch: (action: ActionWithValue | ActionWithError) => {},
+    getState: () => State
+  ) => {
     dispatch({
       type: ActionTypes.SET_FONT_SIZE,
       value
@@ -40,8 +74,11 @@ export function setFontSize(value) {
   };
 }
 
-export function setLineNumbers(value) {
-  return (dispatch, getState) => {
+export function setLineNumbers(value: UserPreferences['lineNumbers']) {
+  return (
+    dispatch: (action: ActionWithValue | ActionWithError) => {},
+    getState: () => State
+  ) => {
     dispatch({
       type: ActionTypes.SET_LINE_NUMBERS,
       value
@@ -58,8 +95,13 @@ export function setLineNumbers(value) {
   };
 }
 
-export function setAutocloseBracketsQuotes(value) {
-  return (dispatch, getState) => {
+export function setAutocloseBracketsQuotes(
+  value: UserPreferences['autocloseBracketsQuotes']
+) {
+  return (
+    dispatch: (action: ActionWithValue | ActionWithError) => {},
+    getState: () => State
+  ) => {
     dispatch({
       type: ActionTypes.SET_AUTOCLOSE_BRACKETS_QUOTES,
       value
@@ -76,8 +118,13 @@ export function setAutocloseBracketsQuotes(value) {
   };
 }
 
-export function setAutocompleteHinter(value) {
-  return (dispatch, getState) => {
+export function setAutocompleteHinter(
+  value: UserPreferences['autocompleteHinter']
+) {
+  return (
+    dispatch: (action: ActionWithValue | ActionWithError) => {},
+    getState: () => State
+  ) => {
     dispatch({
       type: ActionTypes.SET_AUTOCOMPLETE_HINTER,
       value
@@ -94,8 +141,11 @@ export function setAutocompleteHinter(value) {
   };
 }
 
-export function setAutosave(value) {
-  return (dispatch, getState) => {
+export function setAutosave(value: UserPreferences['autosave']) {
+  return (
+    dispatch: (action: ActionWithValue | ActionWithError) => {},
+    getState: () => State
+  ) => {
     dispatch({
       type: ActionTypes.SET_AUTOSAVE,
       value
@@ -112,8 +162,11 @@ export function setAutosave(value) {
   };
 }
 
-export function setLinewrap(value) {
-  return (dispatch, getState) => {
+export function setLinewrap(value: UserPreferences['linewrap']) {
+  return (
+    dispatch: (action: ActionWithValue | ActionWithError) => {},
+    getState: () => State
+  ) => {
     dispatch({
       type: ActionTypes.SET_LINEWRAP,
       value
@@ -130,8 +183,11 @@ export function setLinewrap(value) {
   };
 }
 
-export function setLintWarning(value) {
-  return (dispatch, getState) => {
+export function setLintWarning(value: UserPreferences['lintWarning']) {
+  return (
+    dispatch: (action: ActionWithValue | ActionWithError) => {},
+    getState: () => State
+  ) => {
     dispatch({
       type: ActionTypes.SET_LINT_WARNING,
       value
@@ -148,8 +204,11 @@ export function setLintWarning(value) {
   };
 }
 
-export function setTextOutput(value) {
-  return (dispatch, getState) => {
+export function setTextOutput(value: UserPreferences['textOutput']) {
+  return (
+    dispatch: (action: ActionWithValue | ActionWithError) => {},
+    getState: () => State
+  ) => {
     dispatch({
       type: ActionTypes.SET_TEXT_OUTPUT,
       value
@@ -166,8 +225,11 @@ export function setTextOutput(value) {
   };
 }
 
-export function setGridOutput(value) {
-  return (dispatch, getState) => {
+export function setGridOutput(value: UserPreferences['gridOutput']) {
+  return (
+    dispatch: (action: ActionWithValue | ActionWithError) => {},
+    getState: () => State
+  ) => {
     dispatch({
       type: ActionTypes.SET_GRID_OUTPUT,
       value
@@ -184,12 +246,11 @@ export function setGridOutput(value) {
   };
 }
 
-export function setTheme(value) {
-  // return {
-  //   type: ActionTypes.SET_THEME,
-  //   value
-  // };
-  return (dispatch, getState) => {
+export function setTheme(value: UserPreferences['theme']) {
+  return (
+    dispatch: (action: ActionWithValue | ActionWithError) => {},
+    getState: () => State
+  ) => {
     dispatch({
       type: ActionTypes.SET_THEME,
       value
@@ -206,12 +267,11 @@ export function setTheme(value) {
   };
 }
 
-export function setAutorefresh(value) {
-  // return {
-  //   type: ActionTypes.SET_AUTOREFRESH,
-  //   value
-  // };
-  return (dispatch, getState) => {
+export function setAutorefresh(value: UserPreferences['autorefresh']) {
+  return (
+    dispatch: (action: ActionWithValue | ActionWithError) => {},
+    getState: () => State
+  ) => {
     dispatch({
       type: ActionTypes.SET_AUTOREFRESH,
       value
@@ -228,15 +288,23 @@ export function setAutorefresh(value) {
   };
 }
 
-export function setAllAccessibleOutput(value) {
+export function setAllAccessibleOutput(
+  value: UserPreferences['textOutput'] | UserPreferences['gridOutput']
+) {
   return (dispatch) => {
     dispatch(setTextOutput(value));
     dispatch(setGridOutput(value));
   };
 }
 
-export function setLanguage(value, { persistPreference = true } = {}) {
-  return (dispatch, getState) => {
+export function setLanguage(
+  value: UserPreferences['language'],
+  { persistPreference = true } = {}
+) {
+  return (
+    dispatch: (action: ActionWithLanguage | ActionWithError) => {},
+    getState: () => State
+  ) => {
     i18next.changeLanguage(value);
     dispatch({
       type: ActionTypes.SET_LANGUAGE,
diff --git a/client/modules/IDE/reducers/preferences.js b/client/modules/IDE/reducers/preferences.ts
similarity index 80%
rename from client/modules/IDE/reducers/preferences.js
rename to client/modules/IDE/reducers/preferences.ts
index d6323c4fd2..63c52a53f5 100644
--- a/client/modules/IDE/reducers/preferences.js
+++ b/client/modules/IDE/reducers/preferences.ts
@@ -1,7 +1,13 @@
 import * as ActionTypes from '../../../constants';
 import i18n from '../../../i18n';
+import { UserPreferences, AppThemeOptions } from '../../../../server/types';
 
-export const initialState = {
+interface UserPreferencesClient
+  extends Omit<UserPreferences, 'indentationAmount' | 'isTabIndent'> {
+  tabIndex: number;
+}
+
+export const initialState: UserPreferencesClient = {
   tabIndex: 0,
   fontSize: 18,
   autosave: true,
@@ -10,14 +16,22 @@ export const initialState = {
   lintWarning: false,
   textOutput: false,
   gridOutput: false,
-  theme: 'light',
+  theme: AppThemeOptions.LIGHT,
   autorefresh: false,
   language: i18n.language,
   autocloseBracketsQuotes: true,
   autocompleteHinter: false
 };
 
-const preferences = (state = initialState, action) => {
+const preferences = (
+  state: UserPreferencesClient = initialState,
+  action: {
+    type: keyof ActionTypes;
+    value?: any;
+    preferences?: UserPreferencesClient;
+    language?: UserPreferences['language'];
+  }
+) => {
   switch (action.type) {
     case ActionTypes.OPEN_PREFERENCES:
       return Object.assign({}, state, { tabIndex: 0 });
diff --git a/server/types/userPreferences.ts b/server/types/userPreferences.ts
index eca5f4ca41..470dfc2a91 100644
--- a/server/types/userPreferences.ts
+++ b/server/types/userPreferences.ts
@@ -36,7 +36,7 @@ export type UpdatePreferencesResponseBody = UserPreferences | Error;
  * user.controller.updatePreferences
  */
 export interface UpdatePreferencesRequestBody {
-  preferences: UserPreferences;
+  preferences: Partial<UserPreferences>;
 }
 
 /**